【React】PropTypes の複数種(型)指定

【React】PropTypes の複数種(型)指定

Clock Icon2019.01.09

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、白石です。

複数種類の PropTypes が渡ってくる場合に書き方に迷ってしまったので、備忘録として残しておこうと思います。

PropTypes の場合

// 具体的に特定されている値の範囲でいずれか
optionalUnionData: PropTypes.oneOf(['News', 'Photos']),

// いずれかの型
optionalUnionData: PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.number,
]),

Flow の場合

type optionalUnionData = string | number

HOC, recompose で書いたみた場合

type optionalUnionProps = {
  data: string | number
}

const optionalUnionComponent = (compose(setDisplayName('optionalUnionComponent'): HOC<
  *,
  optionalUnionProps
>)(({ data }) => {
  // something
})

Enum や Object の場合など UtilityTypes1 を使ってみての書き方でも色々と出来そうですね!

参考

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.